<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>

<head>
    <base href="<%=basePath%>"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css" />
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<style>
    /*定义类名为.thead-blue的样式*/
    .thead-blue {
        color: #fff;
        font-weight: bold;
        background-color: #337ab7;
    }
</style>
<body>

<input type="hidden" id="hidEid">

<!-- 搜索 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">角色搜索</h4>
    </div>
    <div class="panel-body">
        <form action="qx/pageRole" id="seachform" method="post"
              class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-12">
                    <label class="col-md-2 control-label">角色名称</label>
                    <div class="col-md-4">
                        <input type="text" name="roleName"
                               class="form-control" placeholder="请输入角色名称"
                               value="">
                        <input type="hidden" name="page" id="page" value="${pageBean.page }">
                        <input type="hidden" name="pageSize" id="pageSize" value="${pageBean.pageSize }">
                    </div>
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-success">搜索</button>
                        <button data-toggle="modal" data-target="#editRoleModal"
                                class="btn btn-info" type="button">添加</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="alertmsg" class="alert alert-danger" style="text-align: center;" hidden="true"></div>

<!-- 列表 -->
<div class="panel panel-primary">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue" align="center">
            <td>角色名称</td>
            <td>角色描述</td>
            <td>角色用户</td>
            <td>角色权限</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${listRole.data}" var="role">
            <tr align="center">
                <td>
                        ${role.roleName}
                </td>
                <td>${role.description}</td>
                <td>
                    <a href="qx/selectRoleUser?oid=${role.oid}">设置角色用户</a>
                </td>
                <td>
                    <a href="qx/listFunctions?oid=${role.oid}">设置角色权限</a>
                </td>
                <td>
                    <button type="button" onclick="updaterole(${role.oid})" data-toggle="modal"
                       data-target="#myModals" class="btn btn-warning btn-xs">修改</button>
                    <button type="button" onclick="deletecard(${role.oid})" class="btn btn-danger btn-xs" data-toggle="modal"
                            data-target="#confirmModal">删除
                    </button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 分页 -->
<div class="input-group col-md-8 col-md-offset-3">
    <div class="row">
        <div class="btn-group">
            <button onclick="gotoPage(1,${listRole.pageSize})" class="btn btn-primary" type="button">首页</button>
            <c:if test="${listRole.page==1 }">
                <button class="btn btn-primary disabled" type="button">上一页</button>
            </c:if>
            <c:if test="${listRole.page>1 }">
                <button onclick="gotoPage(${listRole.page-1},${listRole.pageSize})" class="btn btn-primary"
                        type="button">上一页
                </button>
            </c:if>

            <button class="btn btn-primary disabled" type="button">
                当前第${listRole.page}/${listRole.pageCount}页
            </button>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    每页显示${listRole.pageSize}条 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
                    <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
                    <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
                    <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
                </ul>
            </div>

            <button class="btn btn-primary disabled" type="button">共${listRole.rowCount}条记录</button>

            <c:if test="${listRole.page==listRole.pageCount }">
                <button class="btn btn-primary disabled" type="button">下一页</button>
            </c:if>
            <c:if test="${listRole.page<listRole.pageCount }">
                <button onclick="gotoPage(${listRole.page+1},${listRole.pageSize})" class="btn btn-primary"
                        type="button">下一页
                </button>
            </c:if>
            <button onclick="gotoPage(${listRole.pageCount },${listRole.pageSize})" class="btn btn-primary"
                    type="button">尾页
            </button>
        </div>
    </div>
</div>

<!-- 添加模态框 -->
<div class="modal fade" id="editRoleModal" tabindex="-1" role="dialog"
     aria-labelledby="editRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="editRoleModalLabel">编辑角色信息</h4>
            </div>
            <form action="qx/eidsRole" class="form-horizontal" role="form"
                  id="editRoleForm" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="roleName" class="col-md-2 control-label">角色名称</label>
                            <div class="col-md-10">
                                <input type="hidden" name="oid" id="oid"> <input
                                    type="text" id="roleName" name="roleName" class="form-control"
                                    placeholder="请输入角色名称" value="">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="description" class="col-md-2 control-label">角色描述</label>
                            <div class="col-md-10">
                                <input type="text" id="description" name="description"
                                       class="form-control" placeholder="请输入角色描述"
                                       value="">
                            </div>
                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="sub" class="btn btn-primary">确认提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="myModals" tabindex="-1" role="dialog"
     aria-labelledby="editRoleModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="editRoleModalLabel1">修改角色信息</h4>
            </div>
            <form action="qx/updateRole" class="form-horizontal" role="form"
                  id="editRoleForm1" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="roleName" class="col-md-2 control-label">角色名称</label>
                            <div class="col-md-10">
                                <input type="hidden" name="oid" id="roid"> <input
                                    type="text" name="roleName" id="roleNames" class="form-control"
                                    placeholder="请输入角色名称" value="">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="description" class="col-md-2 control-label">角色描述</label>
                            <div class="col-md-10">
                                <input type="text" name="description" id="descriptions"
                                       class="form-control" placeholder="请输入角色描述"
                                       value="">
                            </div>
                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">确认提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
<%@include file="../modal/confirm.jsp" %>
<script type="text/javascript">

    function updaterole(id) {
        $('#hidEid').val(id);
        alert("json请求之前" + id);
        $.getJSON("qx/selectById?oid=" + id, function (date) {
            console.log(date);
            roleupdate(date);
        });
    }

    function roleupdate(date) {
        $("#roid").val(date.oid);
        $("#roleNames").val(date.roleName);
        $("#descriptions").val(date.description);
        $("#myModals").modal('show');
    }

    function deletecard(oid) {
        deleteoid = oid;
    }

    function deleteConfirm() {
        $.get("qx/deletecard", {"oid": deleteoid}, function (s) {
            if (s == true) {
                document.location.href = "qx/selectRole";
            } else {
                $("#alertmsg").text("删除失败!该用户有角色和权限!");
                $("#alertmsg").slideDown();
                $("#alertmsg").delay(2000).slideUp();
            }
        }).complete(function (xhr) {
            if (xhr.status == "403") {//没有权限
                document.location.href = xhr.getResponseHeader("url");
            } else if (xhr.status != "200") {
                console.log("服务器错误!");
            }
        });

    }

</script>
</body>
</html>
